<template>
	<view class="container">
		<!-- 切换按钮 -->
		<view class="tabs">
			<view class="tab-item" :class="{ 'active': currentType === 0 }" @click="switchType(0)">全部</view>
			<view class="tab-item" :class="{ 'active': currentType === 1 }" @click="switchType(1)">好评</view>
			<view class="tab-item" :class="{ 'active': currentType === 2 }" @click="switchType(2)">中评</view>
			<view class="tab-item" :class="{ 'active': currentType === 3 }" @click="switchType(3)">差评</view>
		</view>

		<!-- 评价列表 -->
		<view class="evaluate-list">
			<view class="evaluate-item" v-for="item in evaluateList" :key="item.id">
				<view class="user-info">
					<image :src="item.member_head" mode="aspectFill" class="avatar"></image>
					<text class="nickname">{{ item.member_nickname || '匿名用户' }}</text>
				</view>

				<view class="star-container">
					<text class="star" v-for="i in 5" :key="i" :class="i <= item.star_num ? 'active' : ''">★</text>
				</view>

				<view class="tags-container" v-if="item.label_list && item.label_list.length > 0">
					<text class="tag" v-for="(tag, index) in item.label_list" :key="index" v-if="tag">{{ tag }}</text>
				</view>

				<text class="content" v-if="item.content">{{ item.content }}</text>
				<text class="content" v-else>暂无</text>
			</view>

			<view class="no-data" v-if="evaluateList.length === 0">
				<image src="../../static/androidImg/icon_not_data.png" mode="widthFix"></image>
				<text>暂无评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/request';

	export default {
		data() {
			return {
				goodsId: '',
				currentType: 0, // 0:全部, 1:好评, 2:中评, 3:差评
				evaluateList: [],
				page: 1,
				loading: false
			};
		},

		onLoad(options) {
			// 获取商品ID
			if (options && options.goods_id) {
				this.goodsId = options.goods_id;
				this.loadEvaluateData();
			} else {
				uni.showToast({
					title: '商品ID不存在',
					icon: 'none'
				});
			}
		},

		methods: {
			// 切换评价类型
			switchType(type) {
				if (this.currentType === type) return;
				this.currentType = type;
				this.page = 1;
				this.evaluateList = [];
				this.loadEvaluateData();
			},

			// 加载评价数据
		loadEvaluateData() {
			if (this.loading) return;

			this.loading = true;
			const params = {
				goods_id: this.goodsId,
				page: this.page
			};
			// 当currentType不为0时才传递type参数
			if (this.currentType !== 0) {
				params.type = this.currentType;
			}

			api.goodsEvaluate(params).then(res => {
					this.loading = false;
					if (res.code === 1 && res.data && res.data.rows) {
						if (this.page === 1) {
							this.evaluateList = res.data.rows;
						} else {
							this.evaluateList = [...this.evaluateList, ...res.data.rows];
						}

						// 如果还有更多数据，可以加载下一页
						// 这里简化处理，实际项目中可能需要下拉加载更多
					} else {
						this.evaluateList = [];
					}
				}).catch(err => {
					this.loading = false;
					console.error('获取评价列表失败', err);
					uni.showToast({
						title: '获取评价列表失败',
						icon: 'none'
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 切换按钮样式
	.tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #e64340;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: #e64340;
					border-radius: 3rpx;
				}
			}
		}
	}

	// 评价列表样式
	.evaluate-list {
		padding: 20rpx;

		.evaluate-item {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background: #f5f5f5;
				}

				.nickname {
					font-size: 28rpx;
					color: #333;
				}
			}

			.star-container {
				display: flex;
				margin-bottom: 15rpx;

				.star {
					font-size: 28rpx;
					color: #ccc;
					margin-right: 5rpx;

					&.active {
						color: #ff9500;
					}
				}
			}

			.tags-container {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 15rpx;

				.tag {
					background-color: #fff0e6;
					color: #e64340;
					font-size: 24rpx;
					padding: 5rpx 15rpx;
					border-radius: 20rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.content {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
			}
		}

		.no-data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 200rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>